<template>
  <div class="bgf6">
    <div class="bg1" id="login">
      <div class="w990 clearfix login_page">
        <a href="/" class="fl">
          <img src="https://static.pxto.com.cn/statics/Home/images/logo.png" width="214" height="56"></a>
        <span class="login_logo fl">为您创造可能</span>
        <span class="fr f14 gray1 mt20">您好，欢迎来到培训通！</span>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="main_content" style="width: 100%;height: 620px;background-color: #F6F6F6">
      <div style="height: 40px;padding-top: 50px">
        <span style="margin-left: 1050px;padding-top: 50px;font-size: 1px;color: gray">还没有培训通账号？</span>
        <a href="/" style="text-decoration: none" class="login_div1_a">  <router-link :to="{name:'Register'}">免费注册</router-link></a>
      </div>
      <div style="width: 1000px;height: 430px;background-color: white;margin: auto;">
        <!--表单-->
        <div class="form" style="float: left;margin-right: 50px">
            <!--标题-->
            <div class="title" style="margin-left: 180px;margin-top: 50px;margin-bottom: 20px">
              <span style="font-size: 20px;font-weight: bold;color: orange">账&nbsp;号&nbsp;登&nbsp;录</span>
            </div>
            <div>
              <el-form :model="User" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号：" prop="username">
                  <el-input style="width: 300px" type="text" v-model="User.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                  <el-input style="width: 300px;" type="password" v-model="User.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="width: 110px" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                  <el-button style="width: 110px" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>

            </div>
        </div>

        <!--照片-->
        <div class="img_content" style="height: 400px;width: 200px;float: left;">
          <div class="fl login_div1_l" style="margin-top: 20px">
            <a href="#">
              <img src="https://static.pxto.com.cn/statics/Home/images/other/login1.png" width="480" height="380">
            </a>
          </div>
        </div>

      </div>
      <!--底部-->
      <div class="bom">
        <div class="w990 center pb20" style="font-size: 1px;margin-top: 50px;color: gray">
          <p>copyright © 2010-today pxto.com.cn, All Rights Reserved. </p>
          <p>
            版权所有  培训通 , 备案编号：京公网安备1101054307 , 蜀ICP备07505283号
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    name: "Index",
    data(){
      return{
        User:{},
        rules:{
            username:[
              { required: true, message: '请输入账号名称', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            ]
        }
      }
    },
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate(async  (valid) => {
          if (valid) {
            if(!this.User.username){alert('请输入账号');return false}
            if(!this.User.password){alert('请输入密码');return false}
            localStorage.setItem('token','Bearer xxxx')
            let _this = this
            this.$axios.post("http://localhost:8066/user/login",this.User).then(function (res) {
              console.log(res)
              //清空本次保存数据
              if(res.data!=-1){
                localStorage.setItem("username",_this.User.username)
                alert("登录成功！")
                _this.User = {};
                _this.$router.push({name:'Index',params:{id:res.data}})
              }else {
                alert("账号或密码错误！");
                _this.User = {};
              }
            }).catch(function (err) {
              localStorage.removeItem('token')
              alert("登陆失败！");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.User.username = ''
        this.User.password = '';
      }
    },
    components:{

    }
  }
</script>

<style scoped>
  .login_div1_a {
    display: inline-block;
    width: 75px;
    height: 31px;
    border: 1px solid #E2E2E2;
    text-align: center;
    font: normal 12px/31px 微软雅黑;
    margin-left: 5px;
    color: #666;
  }

  .bgf6{
    background-color:  #f6f6f6;;
  }

  #login {
    height: 92px;
    width: 100%;
    border-bottom: 1px solid #E7E8E7;
  }
  .bg1 {
    background: #fff;
  }

  #login .login_page {
    padding-top: 17px;
  }

  .w990 {
    width: 990px;
    margin: 0 auto;
  }

  .fl {
    float: left;
  }

  #login .login_page .login_logo {
    font: normal 14px/14px 微软雅黑;
    color: #666;
    margin: 18px 0 0 25px;
    letter-spacing: 5px;
  }

  .fl {
    float: left;
  }

  .f14 {
    font-size: 14px;
    font-family: 微软雅黑;
  }

  .gray1, a.gray1 {
    color: #666666 !important;
  }
  .mt20 {
    margin-top: 20px;
  }
  .fr {
    float: right;
  }

  .center {
    text-align: center;
  }
  .w990 {
    width: 990px;
    margin: 0 auto;
  }
  .pb20 {
    padding-bottom: 20px;
  }

  p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

</style>
